<template>
  <div class="ep-container">
    <el-form-item :label="options.label" :prop="options.name" :show-message="!isDetail" class="ep-form-item">
      <el-date-picker
        v-if="!isDetail"
        class="ep-date-container"
        v-model="fieldModel"
        :type="options.type"
        style="display: inline-flex"
        :style="{ width: '100%' }"
        :disabled="options.disabled"
        :readonly="options.readonly"
        :placeholder="options.placeholder"
        :clearable="options.clearable"
        :format="options.format || 'YYYY-MM-DD'"
        :value-format="options.format || 'YYYY-MM-DD'"
        :editable="false"
      />
      <div v-else class="ep-detail-content">
        {{ fieldModel }}
      </div>
    </el-form-item>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import defaultProps from '../props'

const name = 'ep-date'
Symbol(name)

export default defineComponent({
  name,
  props: defaultProps,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const isDetail = computed(() => props.options.permission > 0)
    const fieldModel = computed({
      get() {
        if (isDetail.value && !props.modelValue) {
          return '--'
        }
        return props.modelValue as string
      },
      set(val: string) {
        emit('update:modelValue', val)
      }
    })

    return {
      fieldModel,
      isDetail
    }
  }
})
</script>
